<template>
  <div class="earlyWarning-container"   v-loading.fullscreen.lock="fullscreenLoading" element-loading-background="rgba(0, 0, 0, 0.8)">
    <container-item title="主动预警" hasNav>

      <div style="width: 100%; height: 100%">
        <div class="top">
          <div class="top_left">
            <div class="fanhui-btn" @click="handleGoback">
              <i class="el-icon-arrow-left"></i>
              <span>返回</span>
            </div>
            <span v-if="showWeb == 1">
              当前位置：主动预警/子模块状态
            </span>
          </div>

          <menu-element />
        </div>
        <div class="content" v-if="showWeb == 0">
          <sec-container title="正极换流阀子模块状态">
            <div class="qiaobi-state-wrapper">
              <qiaobi-status-kangba v-for="item in zheng" class="qiaobi-item" :key="item.name" :normal="item.normal"
                :error="item.t0" :abnormal="item.t1" :leakList="item.points" :name="item.name" :state="item.state"
                @qiaobiClick="
                  itemClick(item.name, '正极', '康巴诺尔站')
                  "></qiaobi-status-kangba>
            </div>

          </sec-container>
          <sec-container title="负极换流阀子模块状态">
            <div class="qiaobi-state-wrapper">
              <qiaobi-status-kangba v-for="item in fu" class="qiaobi-item" :key="item.name" :normal="item.normal"
                :error="item.t0" :abnormal="item.t1" :leakList="item.points" :name="item.name" :state="item.state"
                @qiaobiClick="
                  itemClick(item.name, '负极', '康巴诺尔站')
                  "></qiaobi-status-kangba>
            </div>
          </sec-container>
          <sec-container v-for="(item, key) in neishuilengList" :key="key" title="内水冷状态">
            <div class="qiaobi-wrapper">
              <div class="item">
                <h3>{{ key === 0 ? '正极' : '负极' }}换流阀</h3>
                <qiaobi v-for="(item1, index) in item" :key="index" class="qiaobi-item" :type="item1.name"
                  :state="item1.state" :control="key === 0 ? '正极' : '负极'" @qiaobiClick="neiShuiLengClick">
                </qiaobi>
                <!-- <qiaobi class="qiaobi-item" type="主循环流量" :state="item.zxhllState" :control="item.controlName"
                  @qiaobiClick="neiShuiLengClick">
                </qiaobi>
                <qiaobi class="qiaobi-item" type="进出阀温差" :state="item.jqfwcState" :control="item.controlName"
                  @qiaobiClick="neiShuiLengClick">
                </qiaobi> -->
              </div>
            </div>
          </sec-container>
          <!-- <sec-container title="内水冷状态">
            <div class="qiaobi-wrapper">
              <div class="item">
                <h3>负极换流阀</h3>
                <qiaobi v-for="(item, index) in fu.valveMeasureList" class="qiaobi-item" :key="index"
                  :type="item.measureName" :state="item.state" control="负极" @qiaobiClick="neiShuiLengClick"></qiaobi>
              </div>
            </div>
          </sec-container> -->
        </div>
        <div v-else>
          <div class="tongji_box">
            <div class="tongji_item_box">
              <div class="tongji_item_title_box"><img src="../../assets/images/sec-icon.png"
                  alt="" /><span>投⼊⼦模块数量</span></div>
              <div class="tongji_item_value_box">{{ qiaobiDetails.investmentCount }}</div>
            </div>
            <div class="tongji_item_box">
              <div class="tongji_item_title_box"><img src="../../assets/images/sec-icon.png" alt="" /><span>桥臂电压</span>
              </div>
              <div class="tongji_item_value_box">{{ qiaobiDetails.voltage }}</div>
            </div>
            <div class="tongji_item_box">
              <div class="tongji_item_title_box"><img src="../../assets/images/sec-icon.png"
                  alt="" /><span>⼦模块平均电压</span></div>
              <div class="tongji_item_value_box">{{ qiaobiDetails.avgVoltage }}</div>
            </div>
            <div class="tongji_item_box">
              <div class="tongji_item_title_box"><img src="../../assets/images/sec-icon.png" alt="" /><span>参考电压</span>
              </div>
              <div class="tongji_item_value_box">{{ qiaobiDetails.referenceVoltage }}</div>
            </div>
          </div>
          <div class="fata_box">
            <div class="fata_item_box">
              <div class="fata_item_title_box"><img src="../../assets/images/sec-icon.png" alt="" />1#阀塔</div>
              <div class="fata_item_ul_box">
                <div class="fata_item_li_box">
                  <div class="fata_item_li_title_box">子模块平均电压</div>
                  <div class="fata_item_li_value_box">{{ qiaobiDetails.t1AvgVoltage }}</div>
                </div>
                <div class="fata_item_li_box">
                  <div class="fata_item_li_title_box">最大子模块电压</div>
                  <div class="fata_item_li_value_box">{{ qiaobiDetails.t1MaxVoltage }}</div>
                </div>
                <div class="fata_item_li_box">
                  <div class="fata_item_li_title_box">最低子模块电压</div>
                  <div class="fata_item_li_value_box">{{ qiaobiDetails.t1MinVoltage }}</div>
                </div>
              </div>
            </div>
            <div class="fata_item_box">
              <div class="fata_item_title_box"><img src="../../assets/images/sec-icon.png" alt="" />2#阀塔</div>
              <div class="fata_item_ul_box">
                <div class="fata_item_li_box">
                  <div class="fata_item_li_title_box">子模块平均电压</div>
                  <div class="fata_item_li_value_box">{{ qiaobiDetails.t2AvgVoltage }}</div>
                </div>
                <div class="fata_item_li_box">
                  <div class="fata_item_li_title_box">最大子模块电压</div>
                  <div class="fata_item_li_value_box">{{ qiaobiDetails.t2MaxVoltage }}</div>
                </div>
                <div class="fata_item_li_box">
                  <div class="fata_item_li_title_box">最低子模块电压</div>
                  <div class="fata_item_li_value_box">{{ qiaobiDetails.t2MinVoltage }}</div>
                </div>
              </div>
            </div>
            <div class="fata_item_box">
              <div class="fata_item_title_box"><img src="../../assets/images/sec-icon.png" alt="" />3#阀塔</div>
              <div class="fata_item_ul_box">
                <div class="fata_item_li_box">
                  <div class="fata_item_li_title_box">子模块平均电压</div>
                  <div class="fata_item_li_value_box">{{ qiaobiDetails.t3AvgVoltage }}</div>
                </div>
                <div class="fata_item_li_box">
                  <div class="fata_item_li_title_box">最大子模块电压</div>
                  <div class="fata_item_li_value_box">{{ qiaobiDetails.t3MaxVoltage }}</div>
                </div>
                <div class="fata_item_li_box">
                  <div class="fata_item_li_title_box">最低子模块电压</div>
                  <div class="fata_item_li_value_box">{{ qiaobiDetails.t3MinVoltage }}</div>
                </div>
              </div>
            </div>
            <div class="fata_item_box">
              <div class="fata_item_title_box"><img src="../../assets/images/sec-icon.png" alt="" />4#阀塔</div>
              <div class="fata_item_ul_box">
                <div class="fata_item_li_box">
                  <div class="fata_item_li_title_box">子模块平均电压</div>
                  <div class="fata_item_li_value_box">{{ qiaobiDetails.t4AvgVoltage }}</div>
                </div>
                <div class="fata_item_li_box">
                  <div class="fata_item_li_title_box">最大子模块电压</div>
                  <div class="fata_item_li_value_box">{{ qiaobiDetails.t4MaxVoltage }}</div>
                </div>
                <div class="fata_item_li_box">
                  <div class="fata_item_li_title_box">最低子模块电压</div>
                  <div class="fata_item_li_value_box">{{ qiaobiDetails.t4MinVoltage }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>


    </container-item>
    <pub-dialog :title="dialog.title" :top="'10vh'" :dialogVisible="dialog.visible" dialogVisableRef="dialogVisible"
      @switchVisable="switchVisable" @dialogCancel="dialogCancel" class="dialog" btnType="2">
      <el-form ref="form" :model="dialog.form" inline label-width="130px" class="form-search">
        <el-form-item>
          <el-date-picker style="width: 400px" v-model="dialog.form.date" start-placeholder="开始日期"
            end-placeholder="结束日期" type="datetimerange" :unlink-panels="true" value-format="yyyy-MM-dd HH:mm:ss"
            format="yyyy-MM-dd HH:mm:ss" clearable>
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button class="btn-nav-bg stripe-btn" @click="handleSearch">查询</el-button>
        </el-form-item>
      </el-form>
      <div class="chart-box" v-loading="loadingShow"
    element-loading-background="rgba(0, 0, 0, 0.8)">
        <linebar style="width: 100%; height: 450px" :grid="grid" legendLeft="right" :rotate="-15"
          :axisLabelColor="'rgba(198,211,236)'" :datas="dialog.chartData.data" :xAxis="dialog.chartData.xAxis"
          :isShowTooltip="true"></linebar>
      </div>
    </pub-dialog>
  </div>
</template>

<script>

import ContainerItem from "@/components/ContainerItem.vue";
import MenuElement from "@/components/MenuElement/index.vue";
import PubDialog from "@/components/pubDialog.vue";
import Linebar from "@/components/Linebar";
import SecContainer from "@/components/SecContainer";
import qiaobiStatusKangba from './components/qiaobiStatusKangba.vue';
import qiaobi from './components/qiaobi.vue';

import { cedian } from "@/assets/data";

import { getZdyjApiKangbaQbList, getZdyjApiKangbaDwDetail, getZdyjRunKbTrend } from '@/api/zhongduApi';



export default {
  name: "",
  components: {
    ContainerItem,
    MenuElement,
    PubDialog,
    Linebar,
    SecContainer,
    qiaobiStatusKangba,
    qiaobi
  },
  data() {
    return {
      fullscreenLoading: false,
      loadingShow: false,
      tableHeight: 0, //表格的高
      zhengji: [], //   正极数据
      fuji: [], //   负极数据
      neishuilengList: [], // 内水冷数据
      showWeb: 0, // 是否进入子模块详情页
      qiaobiDetails: {}, // 桥臂数据
      // 内水冷波形图
      dialog: {
        visible: false,
        title: '',
        form: {
          date: [
            this.$moment().subtract(2, "hours").format("YYYY-MM-DD HH:mm:ss"),
            this.$moment().format("YYYY-MM-DD HH:mm:ss"),
          ],
          type: 0,
          electrodeName: '正极'
        },
        valveMeasureList: [],
        chartData: {
          data: [
            {
              type: "line",
              name: "水冷膨胀罐",
              color: "#5087ec",
              showSymbol: true,
              smooth: true,
              data: [],
            },
            {
              type: "line",
              name: "阈值上限",
              color: "#35eb68",
              showSymbol: true,
              smooth: true,
              data: [],
            },
            {
              type: "line",
              name: "阈值下限",
              color: "rgba(84, 61, 7, 1)",
              showSymbol: true,
              smooth: true,
              data: [],
            },
          ],
          xAxis: [],
        },
      },
    };
  },
  created() {
    // 从sessionStorage中获取数据
    let kangbafuye = sessionStorage.getItem('kangbafuye');
    if (kangbafuye) {
      let { zhengfuValue, qiaobiName } = JSON.parse(kangbafuye);
      this.showWeb = 1;
      this.zhengfuValue = zhengfuValue;
      this.qiaobiName = qiaobiName;
      this.itemClick(qiaobiName, zhengfuValue, '康巴诺尔站');
    }
    this.dialog.valveMeasureList = [...cedian]
    this.calcHeight();  // 获取高
    this.newInit();
    // this.init();
    // this.initWebSocket();
  },
  mounted() { },
  methods: {
    calcHeight() {
      this.tableHeight = window.innerHeight - 730;
    },
    // 获取中都实时数据
    newInit() {
      this.fullscreenLoading = true;
      getZdyjApiKangbaQbList().then((res) => {
        if (res.code == 200) {
          let arr0 = [];
          let arr1 = [];
          res.data.forEach((item) => {
            if (item.electrodeName === '正极') {
              arr0 = item.qb;
              arr0.forEach(element => {
                let qbPointsArr = [];
                element.points.forEach(elementPoints => {
                  // 1. 判断是否是重复的

                  let str = elementPoints.name.substr(0, 4);
                  let strHou = elementPoints.name.substr(4, elementPoints.name.length - 4);

                  let idx = qbPointsArr.findIndex(item => item.groupName === str);
                  if (idx !== -1) { // 添加到数组中
                    qbPointsArr[idx].values.push({
                      name: strHou,
                      state: elementPoints.state,
                    });
                  } else {// 不是重复的 新建数组 添加到数组中
                    qbPointsArr.push({
                      groupName: str,
                      values: [{
                        name: strHou,
                        state: elementPoints.state,
                      }]
                    });
                  }
                });
                element.points = qbPointsArr;
              });

            } else if (item.electrodeName === '负极') {
              arr1 = item.qb;
              arr1.forEach(element => {
                let qbPointsArr = [];
                element.points.forEach(elementPoints => {

                  // 1. 判断是否是重复的
                  let str = elementPoints.name.substr(0, 4);
                  let strHou = elementPoints.name.substr(4, elementPoints.name.length - 4);

                  let idx = qbPointsArr.findIndex(item => item.groupName === str);
                  if (idx !== -1) { // 添加到数组中
                    qbPointsArr[idx].values.push({
                      name: strHou,
                      state: elementPoints.state,
                    });
                  } else {// 不是重复的 新建数组 添加到数组中
                    qbPointsArr.push({
                      groupName: str,
                      values: [{
                        name: strHou,
                        state: elementPoints.state,
                      }]
                    });
                  }
                });
                element.points = qbPointsArr;

              });

            }
          });
          this.zheng = arr0;
          this.fu = arr1;
          this.neishuilengList = [res.data[0].sl, res.data[1].sl]
        } else {
          console.log(res.msg)
        }
        this.fullscreenLoading = false;
      })
    },
    qiaobiClick(s, t, n) {
      this.showWeb = 1;
      this.zhengfuValue = t;
      this.qiaobiName = n;
      sessionStorage.setItem('kangbafuye', JSON.stringify({
        zhengfuValue: t,
        qiaobiName: n,
      }))
      // this.currentIdOfsonModule = s + t + n;
      // this.stationName = s;
      // this.controlName = t;
      // this.bridgeName = n;
    },
    // 点击子模块
    itemClick(
      bridgeName,
      electrodeName,
      locationName
    ) {
      getZdyjApiKangbaDwDetail(bridgeName,
        electrodeName,
        locationName).then((res) => {
          this.qiaobiDetails = res.data;
          this.showWeb = 1;
          // 存储数据到sessionStorage
          let data = {
            zhengfuValue: electrodeName,
            qiaobiName: bridgeName,
          };
          sessionStorage.setItem('kangbafuye', JSON.stringify(data));
        })
    },
    // 返回
    handleGoback() {
      if (this.showWeb == 1) {
        this.showWeb = 0;
        // 移除sessionStorage中的数据
        sessionStorage.removeItem('kangbafuye');
      } else {
        this.$router.push('/')
      }
    },
    // 监听弹窗关闭
    switchVisable(visable, ref) {
      this[ref] = visable;
    },
    // 关闭弹窗
    dialogCancel() {
      this.dialog.visible = false;
    },
    // 内水冷点击
    neiShuiLengClick(data) {
      this.dialog.visible = true;
      this.dialog.title = '内水冷历史数据 ~ ' + data.type;
      this.dialog.form.type = cedian.indexOf(data.type);
      this.dialog.form.electrodeName = data.control;
      let params = {
        electrodeName: data.control,
        endTime: this.dialog.form.date[1],
        startTime: this.dialog.form.date[0],
        locationName: '康巴诺尔站',
        sample: cedian.indexOf(data.type),
      };
      this.getXJHistoryWaterWaveformData(params);
    },
    // 内水冷弹出查询
    handleSearch(data) {
      let params = {
        electrodeName: this.dialog.form.electrodeName,
        endTime: this.dialog.form.date[1],
        startTime: this.dialog.form.date[0],
        locationName: '康巴诺尔站',
        sample: this.dialog.form.type,
      };
      this.getXJHistoryWaterWaveformData(params);
    },
    // 内水冷波形图
    getXJHistoryWaterWaveformData(params) {
      let API = getZdyjRunKbTrend;
      this.loadingShow = true;
      API(params).then((res) => {
        this.loadingShow = false;
        if (res.code == 200) {
          this.dialog.chartData.xAxis = res.data.map((item) => item.time);
          this.dialog.chartData.data[0].data = res.data.map(
            (item) => item.value
          );
          this.dialog.chartData.data[0].name = this.dialog.valveMeasureList[this.dialog.form.type]
          this.dialog.chartData.data[1].data = res.data.map(
            (item) => item.upperLimit
          );
          this.dialog.chartData.data[2].data = res.data.map(
            (item) => item.lowerLimit
          );
        }
      });
    },
  },
};
</script>

<style scoped lang="less">
.tongji_box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 20px;

  .tongji_item_box {
    flex: 1;
    background: linear-gradient(266deg, #1E2F34 0%, #142126 100%);
    border: 1px solid #006686;
    height: 152px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    .tongji_item_title_box {
      img {
        width: 30px;
        height: 20px;
        margin-right: 10px;
      }

      display: flex;
      align-items: center;
      font-family: Adobe Heiti Std;
      font-weight: normal;
      font-size: 24px;
      color: #FFFFFF;
      margin-bottom: 26px;
    }

    .tongji_item_value_box {
      font-family: Adobe Heiti Std;
      font-weight: normal;
      font-size: 40px;
      color: #00E9F3;
    }

  }
}

.fata_box {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;

  .fata_item_box {
    width: 49.5%;
    height: 280px;
    background: linear-gradient(266deg, #1E2F34 0%, #142126 100%);
    border: 1px solid #006686;
    margin-bottom: 20px;
    padding: 20px 27px;
    box-sizing: border-box;

    .fata_item_title_box {
      height: 44px;
      font-family: Adobe Heiti Std;
      font-weight: normal;
      font-size: 25px;
      color: #FFFFFF;

      img {
        width: 30px;
        height: 20px;
        margin-right: 10px;
      }
    }

    .fata_item_ul_box {
      display: flex;
      align-items: center;

      .fata_item_li_box {
        flex: 1;
        height: 199px;
        background: linear-gradient(266deg, #283E44 0%, #202F35 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;

        .fata_item_li_title_box {
          font-family: Adobe Heiti Std;
          font-weight: normal;
          font-size: 25px;
          color: #FFFFFF;
          margin-bottom: 46px;
        }

        .fata_item_li_value_box {
          font-family: Adobe Heiti Std;
          font-weight: normal;
          font-size: 42px;
          color: #00E9F3;
        }
      }
    }
  }
}

.item_state {
  width: 108px;
  height: 108px;
  background: linear-gradient(0, rgba(30, 187, 48, 0.5), rgba(30, 187, 48, 0.2), rgba(30, 187, 48, 0.0) 50%);
  border-radius: 50%;
  border: 4px solid #1EBB30;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Adobe Heiti Std;
  font-weight: normal;
  font-size: 28px;
  color: #1EBB30;
}

.item_state_yichang {
  width: 108px;
  height: 108px;
  background: linear-gradient(0, rgba(255, 170, 0, 0.5), rgba(255, 170, 0, 0.2), rgba(255, 170, 0, 0) 50%);
  border-radius: 50%;
  border: 4px solid #FFAA00;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Adobe Heiti Std;
  font-weight: normal;
  font-size: 28px;
  color: #FFAA00;
}

.item_state_yanzhong {
  width: 108px;
  height: 108px;
  background: linear-gradient(0, rgba(255, 55, 55, 0.5), rgba(255, 55, 55, 0.2), rgba(255, 55, 55, 0) 50%);
  border-radius: 50%;
  border: 4px solid #FF3737;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Adobe Heiti Std;
  font-weight: normal;
  font-size: 28px;
  color: #FF3737;
}

.top {
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;

  .top_left {
    display: flex;
    align-items: center;
  }

  .fanhui-btn {
    cursor: pointer;
    margin-right: 20px;

    span {
      margin-left: 5px;
    }
  }

  .lujing {
    margin-left: 50px;
  }
}

::v-deep .el-radio-group {
  margin-bottom: 10px;
}

::v-deep .el-radio-button__inner {
  background: #101d29;
  border: 0;
  color: #ffffff;
}

::v-deep .el-radio-button:first-child .el-radio-button__inner {
  border: 0;
}

::v-deep .sec-title-right {
  margin-top: 15px !important;
}

.content {
  width: 100%;
  height: calc(100% - 42px);
  display: flex;
  justify-content: space-between;
  align-content: space-between;
  flex-wrap: wrap;

  ::v-deep .sec-wrapper {
    width: calc(50% - 8px);

    &:first-child,
    &:nth-child(2) {
      height: calc(80% - 8px);
    }

    &:nth-child(3),
    &:nth-child(4) {
      height: calc(20% - 8px);
    }

    &:last-child {
      .sec-content {
        position: relative;
      }
    }
  }

  .qiaobi-state-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;

    .qiaobi-item {
      width: 33.3%;
      height: calc(100% / 2);
    }
  }

  .qiaobi-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;

    .item {
      display: flex;
      flex: 1;
      align-items: center;

      h3 {
        align-self: center;
        width: 100px;
        color: #40e5f0;
      }
    }

    .qiaobi-item {
      width: 33.3%;
      height: calc(100% - 20px);
    }
  }
}

.earlyWarning-container {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
}

::v-deep .el-descriptions {
  .el-descriptions__body {
    color: #fff;
    font-size: 16px;
    line-height: 50px;
    background-color: transparent;

    .el-descriptions-item__cell {
      padding-bottom: 30px;

      .el-descriptions-item__content {
        color: rgb(80, 229, 239);
      }
    }
  }
}
</style>
